<template>
    <div>
      <template>
        <Row type="flex" justify="center" :gutter="20">
          <Col span="24">
            <Card class="card">
              <focus-area-total-echart :width="offsetWidth-300" :height="300"></focus-area-total-echart>
            </Card>
          </Col>
        </Row>
        <br>
        <Row :gutter="20">
          <Col span="12">
            <Card class="card">
              <focus-total-time-echart :width="echartWidth" :height="300"></focus-total-time-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <focus-heping-time-echart :width="echartWidth" :height="300"></focus-heping-time-echart>
            </Card>
          </Col>
        </Row>
        <br>
        <Row :gutter="20">
          <Col span="12">
            <Card class="card">
              <focus-shenhe-time-echart :width="echartWidth" :height="300"></focus-shenhe-time-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <focus-tiexi-time-echart :width="echartWidth" :height="300"></focus-tiexi-time-echart>
            </Card>
          </Col>
        </Row>
        <br>
        <Row :gutter="20">
          <Col span="12">
            <Card class="card">
              <focus-huanggu-time-echart :width="echartWidth" :height="300"></focus-huanggu-time-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <focus-dadong-time-echart :width="echartWidth" :height="300"></focus-dadong-time-echart>
            </Card>
          </Col>
        </Row>
        <br>
        <Row :gutter="20">
          <Col span="12">
            <Card class="card">
              <focus-hunnan-time-echart :width="echartWidth" :height="300"></focus-hunnan-time-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <focus-yuhong-time-echart :width="echartWidth" :height="300"></focus-yuhong-time-echart>
            </Card>
          </Col>
        </Row>
        <br>
        <Row :gutter="20">
          <Col span="12">
            <Card class="card">
              <focus-shenbei-time-echart :width="echartWidth" :height="300"></focus-shenbei-time-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <focus-sujiatun-time-echart :width="echartWidth" :height="300"></focus-sujiatun-time-echart>
            </Card>
          </Col>
        </Row>
        <br>
        <Row :gutter="20">
          <Col span="12">
            <Card class="card">
              <focus-liaozhong-time-echart :width="echartWidth" :height="300"></focus-liaozhong-time-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <focus-xinmin-time-echart :width="echartWidth" :height="300"></focus-xinmin-time-echart>
            </Card>
          </Col>
        </Row>
        <br>
        <Row :gutter="20">
          <Col span="12">
            <Card class="card">
              <focus-faku-time-echart :width="echartWidth" :height="300"></focus-faku-time-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <focus-kangping-time-echart :width="echartWidth" :height="300"></focus-kangping-time-echart>
            </Card>
          </Col>
        </Row>
        <br>
      </template>
    </div>
</template>

<script>
import FocusAreaTotalEchart from './compoments/focus-area-total-echart/index'
import FocusTotalTimeEchart from './compoments/focus-total-time-echart/index'
import FocusHepingTimeEchart from './compoments/focus-heping-time-echart/index'
import FocusShenheTimeEchart from './compoments/focus-shenhe-time-echart/index'
import FocusTiexiTimeEchart from './compoments/focus-tiexi-time-echart/index'
import FocusHuangguTimeEchart from './compoments/focus-huanggu-time-echart/index'
import FocusDadongTimeEchart from './compoments/focus-dadong-time-echart/index'
import FocusHunnanTimeEchart from './compoments/focus-hunnan-time-echart/index'
import FocusYuhongTimeEchart from './compoments/focus-yuhong-time-echart/index'
import FocusShenbeiTimeEchart from './compoments/focus-shenbei-time-echart/index'
import FocusSujiatunTimeEchart from './compoments/focus-sujiatun-time-echart/index'
import FocusLiaozhongTimeEchart from './compoments/focus-liaozhong-time-echart/index'
import FocusXinminTimeEchart from './compoments/focus-xinmin-time-echart/index'
import FocusFakuTimeEchart from './compoments/focus-faku-time-echart/index'
import FocusKangpingTimeEchart from './compoments/focus-kangping-time-echart/index'
export default {
  components: {
    FocusKangpingTimeEchart,
    FocusFakuTimeEchart,
    FocusXinminTimeEchart,
    FocusLiaozhongTimeEchart,
    FocusSujiatunTimeEchart,
    FocusShenbeiTimeEchart,
    FocusYuhongTimeEchart,
    FocusHunnanTimeEchart,
    FocusDadongTimeEchart,
    FocusHuangguTimeEchart,
    FocusTiexiTimeEchart,
    FocusShenheTimeEchart,
    FocusHepingTimeEchart,
    FocusTotalTimeEchart,
    FocusAreaTotalEchart
  },
  data () {
    return {
      routeState: '0',
      offsetWidth: document.documentElement.clientWidth,
      offsetHeight: document.documentElement.clientHeight,
      echartWidth: (document.documentElement.clientWidth - 300) / 2,
      echartHeight: (document.documentElement.clientHeight - 330) / 2
    }
  },
  mounted () {
  },
  methods: {
  },
  watch: {
    // $route (val) {
    //   this.routeState = val.query.w ? val.query.w : '0'
    // }
  }
}
</script>

<style lang="less" scoped>
  .card {
    background-color: rgba(200,200,200,0.1);
  }
</style>
